<!--
 * @ModuleName: Permissin Test
 * @Author: yuetchn@163.com
 * @LastEditTime: 2023-01-08 22:30:44
-->
<template>
  <div>
    <div style="padding:10px;margin-bottom:15px;background:#ffffff;">
      <el-alert type="info">
        此模块功能已经由Mock转go服务，已经完成对接，功能正常使用。
      </el-alert>
    </div>
    <el-card>
      <template #header>权限说明</template>
      <div>
        <p>
          调用UserStore中的 login 方法切换用户<br />
          切换用户后根据接口返回的菜单以及角色生成动态路由表:<br />
          避免刷新后动态路由丢失问题，动态路由生成放到了路由拦截里面<br />
          <br />
        </p>
      </div>
    </el-card>

    <el-card style="margin-top: 15px">
      <template #header>切换权限</template>
      <div>
        <h4>当前用户：{{ userName }}</h4>
        <el-button type="primary" @click="toggleUser(1)">切换到Admin</el-button>
        <el-button type="primary" @click="toggleUser(2)">切换到Test</el-button>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "@/store/user";

const store = useUserStore();
const router = useRouter();
const route = useRoute();

const userName = computed(() => store.userName);
const toggleUser = async (type: number) => {
  switch (type) {
    case 1:
      await store.login({
        account: "admin",
        password: "e10adc3949ba59abbe56e057f20f883e",
      });
      break;
    case 2:
      await store.login({
        account: "test",
        password: "e10adc3949ba59abbe56e057f20f883e",
      });
      break;
    default:
      break;
  }
  router.replace(route.path);
};
</script>
